<template>
  <slot name="trigger"></slot>
  <teleport to="body" v-if="modalOpen">
    <div
      class="modal dialog-event"
      :class="{ modelbg: modal }"
      @click.self="(modal && modalclose()) || null"
    >
      <slot></slot>
    </div>
  </teleport>
</template>
<script lang="ts" src="./EwgDialog.script.ts"></script>
<style lang="scss" scoped>
.dialog-event {
  pointer-events: none;
  &:v-deep(& > *) {
    pointer-events: auto;
  }
}
.modelbg {
  background-color: rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
</style>
